<template>
  <view class="story-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-back" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="nav-title">故事生成</text>
      <view class="nav-actions">
        <text class="nav-icon" @click="showHelp">?</text>
      </view>
    </view>

    <scroll-view class="content-scroll" scroll-y="true">
      <!-- 故事模板选择 -->
      <view class="template-section">
        <text class="section-title">选择故事模板</text>
        <view class="template-grid">
          <view 
            v-for="template in storyTemplates" 
            :key="template.id"
            class="template-card"
            :class="{ active: selectedTemplate === template.id }"
            @click="selectTemplate(template.id)"
          >
            <text class="template-icon">{{ template.icon }}</text>
            <text class="template-name">{{ template.name }}</text>
            <text class="template-desc">{{ template.description }}</text>
          </view>
        </view>
      </view>

      <!-- 故事设置 -->
      <view class="settings-section">
        <text class="section-title">故事设置</text>
        
        <!-- 故事长度 -->
        <view class="setting-item">
          <text class="setting-label">故事长度</text>
          <view class="length-options">
            <view 
              v-for="length in storyLengths" 
              :key="length.value"
              class="length-option"
              :class="{ active: storySettings.length === length.value }"
              @click="storySettings.length = length.value"
            >
              <text class="length-name">{{ length.name }}</text>
            </view>
          </view>
        </view>

        <!-- 故事风格 -->
        <view class="setting-item">
          <text class="setting-label">故事风格</text>
          <view class="style-options">
            <view 
              v-for="style in storyStyles" 
              :key="style.value"
              class="style-option"
              :class="{ active: storySettings.style === style.value }"
              @click="storySettings.style = style.value"
            >
              <text class="style-name">{{ style.name }}</text>
            </view>
          </view>
        </view>

        <!-- 主要角色 -->
        <view class="setting-item">
          <text class="setting-label">主要角色</text>
          <input 
            v-model="storySettings.mainCharacter" 
            class="setting-input" 
            placeholder="输入主角名称或描述"
            placeholder-class="placeholder"
          />
        </view>

        <!-- 故事主题 -->
        <view class="setting-item">
          <text class="setting-label">故事主题</text>
          <input 
            v-model="storySettings.theme" 
            class="setting-input" 
            placeholder="例如：友情、成长、冒险等"
            placeholder-class="placeholder"
          />
        </view>

        <!-- 故事大纲 -->
        <view class="setting-item">
          <text class="setting-label">故事大纲</text>
          <textarea 
            v-model="storySettings.outline" 
            class="outline-textarea" 
            placeholder="描述故事的基本情节..."
            placeholder-class="placeholder"
            maxlength="500"
          />
          <text class="char-count">{{ storySettings.outline.length }}/500</text>
        </view>
      </view>

      <!-- 生成按钮 -->
      <view class="generate-section">
        <button 
          class="generate-btn" 
          :disabled="!canGenerate"
          @click="generateStory"
        >
          <text class="btn-text">生成故事</text>
          <text class="btn-icon">📖</text>
        </button>
      </view>

      <!-- 故事预览 -->
      <view v-if="generatedStory" class="preview-section">
        <text class="section-title">故事预览</text>
        <view class="story-preview">
          <text class="story-title">{{ generatedStory.title }}</text>
          <view class="story-content">
            <text class="story-text">{{ generatedStory.content }}</text>
          </view>
          <view class="story-actions">
            <button class="story-btn" @click="saveStory">保存故事</button>
            <button class="story-btn secondary" @click="regenerateStory">重新生成</button>
            <button class="story-btn secondary" @click="exportStory">导出</button>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedTemplate: 'adventure',
      storyTemplates: [
        {
          id: 'adventure',
          name: '冒险',
          icon: '🗺️',
          description: '探索未知世界的冒险故事'
        },
        {
          id: 'romance',
          name: '恋爱',
          icon: '💕',
          description: '浪漫温馨的爱情故事'
        },
        {
          id: 'fantasy',
          name: '奇幻',
          icon: '✨',
          description: '魔法与幻想的世界'
        },
        {
          id: 'school',
          name: '校园',
          icon: '🎒',
          description: '青春校园生活故事'
        }
      ],
      storySettings: {
        length: 'medium',
        style: 'light',
        mainCharacter: '',
        theme: '',
        outline: ''
      },
      storyLengths: [
        { value: 'short', name: '短篇' },
        { value: 'medium', name: '中篇' },
        { value: 'long', name: '长篇' }
      ],
      storyStyles: [
        { value: 'light', name: '轻松' },
        { value: 'dramatic', name: '戏剧' },
        { value: 'comedy', name: '喜剧' },
        { value: 'serious', name: '严肃' }
      ],
      generatedStory: null
    }
  },
  computed: {
    canGenerate() {
      return this.selectedTemplate && this.storySettings.mainCharacter
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    showHelp() {
      uni.showModal({
        title: '帮助',
        content: '选择故事模板并设置相关参数，AI将根据您的设定生成完整的故事。',
        showCancel: false
      })
    },
    selectTemplate(templateId) {
      this.selectedTemplate = templateId
    },
    generateStory() {
      if (!this.canGenerate) {
        uni.showToast({
          title: '请填写必要信息',
          icon: 'none'
        })
        return
      }

      uni.showLoading({
        title: '生成中...'
      })

      // 模拟生成过程
      setTimeout(() => {
        uni.hideLoading()
        
        const template = this.storyTemplates.find(t => t.id === this.selectedTemplate)
        const lengthName = this.storyLengths.find(l => l.value === this.storySettings.length)?.name || ''
        const styleName = this.storyStyles.find(s => s.value === this.storySettings.style)?.name || ''
        
        this.generatedStory = {
          title: `${this.storySettings.mainCharacter}的${template.name}故事`,
          content: `这是一个${lengthName}${styleName}风格的${template.name}故事。主角${this.storySettings.mainCharacter}将展开一段精彩的冒险。${this.storySettings.outline || '故事充满了惊喜和感动，等待您来探索。'}`
        }

        uni.showToast({
          title: '故事生成成功！',
          icon: 'success'
        })
      }, 3000)
    },
    saveStory() {
      uni.showModal({
        title: '保存故事',
        content: '确定要保存这个故事吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '故事已保存',
              icon: 'success'
            })
          }
        }
      })
    },
    regenerateStory() {
      this.generatedStory = null
      this.generateStory()
    },
    exportStory() {
      uni.showActionSheet({
        itemList: ['导出为文本', '导出为PDF'],
        success: (res) => {
          if (res.tapIndex === 0) {
            uni.showToast({
              title: '已复制到剪贴板',
              icon: 'success'
            })
          } else {
            uni.showToast({
              title: 'PDF导出功能开发中',
              icon: 'none'
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.story-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #FFE4E6, #F8F8FF);
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 30rpx 20rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10rpx);
}

.nav-back {
  padding: 15rpx;
}

.back-icon {
  font-size: 32rpx;
  color: #FF69B4;
}

.nav-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.nav-actions {
  padding: 15rpx;
}

.nav-icon {
  font-size: 28rpx;
  color: #FF69B4;
  font-weight: bold;
}

.content-scroll {
  height: calc(100vh - 120rpx);
  padding: 0 30rpx;
}

.template-section,
.settings-section {
  margin-bottom: 40rpx;
}

.section-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  padding-left: 10rpx;
  border-left: 6rpx solid #FF69B4;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.template-card {
  background: white;
  border: 2rpx solid #E8E8E8;
  border-radius: 20rpx;
  padding: 40rpx 25rpx;
  text-align: center;
  transition: all 0.3s ease;
}

.template-card.active {
  border-color: #FF69B4;
  background: #FFF0F5;
  transform: translateY(-5rpx);
  box-shadow: 0 8rpx 24rpx rgba(255, 105, 180, 0.2);
}

.template-icon {
  font-size: 48rpx;
  display: block;
  margin-bottom: 15rpx;
}

.template-name {
  display: block;
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.template-desc {
  font-size: 22rpx;
  color: #666;
  line-height: 1.4;
}

.setting-item {
  margin-bottom: 40rpx;
}

.setting-label {
  display: block;
  font-size: 26rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.length-options,
.style-options {
  display: flex;
  gap: 20rpx;
}

.length-option,
.style-option {
  flex: 1;
  background: white;
  border: 2rpx solid #E8E8E8;
  border-radius: 15rpx;
  padding: 25rpx 20rpx;
  text-align: center;
  transition: all 0.3s ease;
}

.length-option.active,
.style-option.active {
  border-color: #FF69B4;
  background: #FFF0F5;
}

.length-name,
.style-name {
  font-size: 24rpx;
  color: #333;
}

.setting-input,
.outline-textarea {
  width: 100%;
  background: white;
  border: 2rpx solid #E8E8E8;
  border-radius: 15rpx;
  padding: 25rpx;
  font-size: 26rpx;
  box-sizing: border-box;
}

.setting-input:focus,
.outline-textarea:focus {
  border-color: #FF69B4;
}

.placeholder {
  color: #999;
}

.outline-textarea {
  height: 200rpx;
  resize: none;
}

.char-count {
  display: block;
  text-align: right;
  font-size: 22rpx;
  color: #999;
  margin-top: 10rpx;
}

.generate-section {
  margin: 50rpx 0;
}

.generate-btn {
  width: 100%;
  background: linear-gradient(135deg, #FF69B4, #FF1493);
  border: none;
  border-radius: 25rpx;
  padding: 30rpx;
  color: white;
  font-size: 28rpx;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15rpx;
}

.generate-btn:disabled {
  background: #CCC;
  color: #999;
}

.btn-text {
  font-size: 28rpx;
}

.btn-icon {
  font-size: 24rpx;
}

.preview-section {
  margin-bottom: 40rpx;
}

.story-preview {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}

.story-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #FFE4E6;
}

.story-content {
  margin-bottom: 40rpx;
}

.story-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.8;
}

.story-actions {
  display: flex;
  gap: 20rpx;
}

.story-btn {
  flex: 1;
  background: #FF69B4;
  border: none;
  border-radius: 15rpx;
  padding: 20rpx;
  color: white;
  font-size: 24rpx;
}

.story-btn.secondary {
  background: #E8E8E8;
  color: #666;
}
</style>